<template>
  <div>
    <div>
      <div style="min-width: 1500px;">
        <el-container>
          <el-header>
            <el-menu
              class="el-menu container"
              mode="horizontal"
            >
              <el-menu-item class="el-menuItem" @click="BasicsHTML" index="1" >HTML</el-menu-item>
              <el-menu-item class="el-menuItem" @click="BasicCSS" index="2" >CSS</el-menu-item>
              <el-menu-item class="el-menuItem" @click="BasicJS" index="3"  dropzone="">JavaScript</el-menu-item>
              <el-menu-item class="el-menuItem" @click="BasicUI" index="4">UI</el-menu-item>
              <el-menu-item class="el-menuItem" @click="BasicRequest" index="5">交互</el-menu-item>
              <el-menu-item class="el-menuItem" @click="BasicFrame" index="6">VUE</el-menu-item>
              <el-menu-item class="el-menuItem" @click="BasicState" index="7">状态</el-menu-item>
              <el-menu-item class="el-menuItem" @click="BasicStorage" index="8">存储</el-menu-item>
              <el-menu-item class="el-menuItem" @click="BasicAimation" index="9">动画</el-menu-item>
              <el-menu-item class="el-menuItem" @click="BasicWebpack" index="10">Webpack</el-menu-item>
                <!-- <el-menu-item class="el-menuItem include" @click="programInclude" index="11">网站介绍</el-menu-item> -->
                <el-menu-item  style="float: right;">
                  <div>
                    <el-input style="width:400px;" v-model="input" @keydown.enter.native="search" placeholder="ENTER搜索,example: p标签"></el-input>
                  </div>
                </el-menu-item>
            </el-menu>
        <div class="line"></div>
          </el-header>
          <el-main>
              <router-view name="html"></router-view>
              <router-view name="ui"></router-view>
              <router-view name="req"></router-view>
              <router-view name="frame"></router-view>
              <router-view name="state"></router-view>
              <router-view name="storage"></router-view>
              <router-view name="anime"></router-view>
              <router-view name="css"></router-view>
              <router-view name="js"></router-view>
              <router-view name="webpack"></router-view>
              <router-view name="include"></router-view>
          </el-main>
        </el-container>

      </div>       
    </div>
  </div>
</template>

<script>
export default {
  name: "NavigationBar",
  data() {
    return {
      input: ""
    };
  },
  watch: {},
  computed: {},
  methods: {
      BasicsHTML(){
          this.$router.history.replace("/basichtml")
      },
       BasicCSS(){
          this.$router.history.replace("/basiccss")
      },
       BasicJS(){
          this.$router.history.replace("/basicjs")
      },
      BasicUI(){
          this.$router.history.replace("/basicui")
      },
      BasicRequest(){
          this.$router.history.replace("/basicrequest")
      },
      BasicFrame(){
          this.$router.history.replace("/basicframe")
      },
      BasicState(){
          this.$router.history.replace("/basicstate")
      },
      BasicStorage(){
          this.$router.history.replace("/basicstorage")
      },
      BasicAimation(){
          this.$router.history.replace("/basicaimaton")
      },
      BasicWebpack(){
          this.$router.history.replace("/basicwebpack")

      },
      programInclude(){
          this.$router.history.replace("/includes")
      },
      search(){
        if(this.input.indexOf("p标签") == 0) {
          this.$router.history.replace("/basichtml")
          window.scrollTo(100,100)

        }
      }
  }
};
</script>

<style>
.el-menu .el-menuItem {
  width: 100px;
  text-align: center;
}
</style>